import React, { Component } from 'react';
import {Transition} from 'react-transition-group';

const styles = {
  width: 200,
  height: 200,
  background: 'orange',
  transition: 'all .5s'
};

const transitionStyles = {
  entering: {opacity: 1, transform: 'scale(1) translateY(0)'},
  entered: {opacity: 1, transform: 'scale(1) translateY(0)'},
  exiting: {opacity: 0, transform: 'scale(.8) translateY(10px)'},
  exited: {opacity: 0, transform: 'scale(.8) translateY(10px)'}
};

class TransitionDemo extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  // 动画结束
  addEndListener = (node) => {
    node.addEventListener('transitionend', this.done, false);
  }
  done = () => {
    console.log('动画结束了');
  }
  onEnter = (node, isAppearing) => {
    console.log(node, isAppearing);
  }
  onEntering = (node, isAppearing) => {
    console.log(node, isAppearing);
  }
  onEntered = (node, isAppearing) => {
    console.log(node, isAppearing);
  }
  render() { 
    return (
      <Transition
        in={this.props.show}
        timeout={500}
        // addEndListener={this.addEndListener}
        onEntering={this.onEntering}
        onEntered={this.onEntered}
        onEnter={this.onEnter}
      >
        {
          state => (
            <div style={{...styles, ...transitionStyles[state]}}></div>
          )
        }
      </Transition>
    );
  }
}
 
export default TransitionDemo;